<template>
	<view class="page">
		<view class="head" :style="{ height: selectData.navBarHeight + 'px', width: selectData.screenWidth + 'px' }">
			<image src="https://cdn.oss.bon-top.cn/static_bc/images/integralHead.png" class="bg_img"
				:style="{ height: selectData.bgImgHeight + 'px', width: selectData.screenWidth + 'px' }"
				mode="widthFix">
			</image>
			<view class="back_box" :style="{ height: selectData.navBarHeight + 'px' }">
				<!-- 状态栏 -->
				<view class="null"
					:style="{ height: selectData.statusBarHeight + 'px', width: selectData.screenWidth + 'px' }">
				</view>
				<!-- 返回 -->
				<view class="back"
					:style="{ top: selectData.statusBarHeight + 'px', width: selectData.screenWidth + 'px', height: selectData.navBarHeightTitle + 'px' }">
					<image @click="goBack" class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/back.png"
						mode="aspectFit">
					</image>
					<text class="text ft-32 fw-800 c-33">{{
						'赚积分'
					}}</text>
					<view :style="{ width: (selectData.menuButtonRight ? selectData.menuButtonRight : 90) + 'px' }"
						style="color: aqua;height: 100px;">
					</view>
				</view>
				<view class="headerContent"
					:style="{ width: selectData.screenWidth + 'px', height: (selectData.navBarHeight - selectData.headItem) + 'px' }">
					<view class="header_box_slot">
						<view class="search-model">
							<view style="height: 30rpx;width: 100%;"></view>
							<view class="tab_model">
								<view class="subsection bd-r20 ml-30 c-66" v-for="sub in tabList" :key="sub.key"
									:class="sub.key == activsub ? 'subsection_active' : ''" @click="changeSub(sub)">{{
										sub.name }}
								</view>
							</view>
							<view class="rule-model flex-bwt bd-r30 pd-20">
								<view class="flex">
									<image @click="goBack" class="icon_samll"
										src="https://cdn.oss.bon-top.cn/static_bc/images/illus-black.png">
									</image>
									<text class="ft-22 c-66" style="margin-left: 10rpx;">{{ tabList[activsub - 1].title
									}}</text>
								</view>
								<view class="button bd-r26 ft-22 fw-400">
									查看规则
									<!-- <u-button type="default" shape="circle" text="按钮形状" color="#fff"></u-button> -->
								</view>
							</view>
							<view class="flex-end  fw-400 ft-24 c-66" v-if="activsub == 3">
								<view class="sort_model flex-eve bd-r20">
									<view v-for="(item, index) in sortList" :key="item.key"
										class="sort_model_item flex-center bd-r20"
										:class="item.click ? 'sort_model_active' : ''"
										@click="index != 2 ? changeSort(item) : ''">{{
											item.name }}
										<image class="icon_samll"
											:class="item.key !== 3 ? item.key == 1 ? 'sortImg' : 'sortImg_deg' : ''"
											:src="'https://cdn.oss.bon-top.cn/static_bc/images/' + item.img"
											mode="aspectFill">
										</image>
									</view>
								</view>

							</view>

						</view>
					</view>
				</view>

			</view>

		</view>
		<view :style="{ height: selectData.navBarHeight + 'px' }"></view>
		<view class="list_box">
			<!-- 推荐项目 -->
			<comLoadMord v-if="activsub == 1 && Object.keys(dataList).length > 0" :dataList='dataList'
				:pageInfo='pageInfo' @getDatas="getRecommendIntegralListFun">

				<view v-for="list in shareList" :key="list.id" class="list_model" id="ListModel"
					@click="goDetail('/subpackage/immigration/immigration?id=' + list.id)">
					<!-- 倒计时 -->
					<view class="timeOut_box flex-center">
						<view class="ft-24 fw-800 c-33">{{ "距离结束" }}</view>
						<comTimeOut class="ml-10" :size="20" :time="list.recommend_info?.end_time"></comTimeOut>
						<!-- size 倒计时数字的字号大小 -->
					</view>
					<view class="top">
						<view class="left">
							<image class="imgs bd-r40" :src="list.cover" mode="aspectFill">
							</image>
						</view>
						<view class="right">
							<view class="title_model mt-24">
								<view class="label label1 ft-20 flex-center" v-for="label in list.recommends_show"
									:key="label">
									{{ label }}
								</view>
								<text class="text ft-32 ft1 ">{{ list.name }}</text>

							</view>
							<view class="money_model flex-bwt mt-10">

								<view class="money ft-20">{{ list.currency_symbol || '' }}<span class="ft-36 ft-num">{{
									list.bc_price_show }}</span>{{ list.bc_price_unit }}</view>

								<view class="userNum flex mr-20">
									<avtorGroup v-if="list?.recommend_info?.list?.length > 0"
										:avatars="list.recommend_info.list" keyName="avatar" size="38"></avtorGroup>
									<text class="ft-24 c-66 fw-400 ml-4"> {{ list.recommend_info.count }} 人已推</text>
								</view>
							</view>

							<view class="option_model flex-bwt mt-36">
								<view class="leftM">
									<text class="ft-22 c-66">{{ list.stage_txt || '用户下订办理成功获积分' }}</text>
									<view class="flex mt-12">

										<image class="icon"
											src="https://cdn.oss.bon-top.cn/static_bc/images/gold-icon.png"></image>


										<view class="leftM_child2 ft-36 fw-900 c-33 ft-num3">
											+{{ list.recommend_info.integral }}
										</view>
									</view>
								</view>
								<view class="rightM c-ff bd-r20 mr-20 ft-28"
									:class="activsub != 1 ? 'rightM-active' : ''">

									<span>推荐朋友</span>
									<button open-type="share" class="hidden-share-btn"
										@tap.stop="onCustomShare(list.id, list)"
										@touchstart="handleTouchStart(list)"></button>

								</view>
							</view>
						</view>
					</view>

					<view class="ft-22 c-99 bot-tips" v-if="list.is_get">{{ list.end_time_txt }}</view>
				</view>
			</comLoadMord>
			<comLoadMord v-if="activsub == 2 && Object.keys(dataList).length > 0" :dataList='dataList'
				:pageInfo='pageInfo' @getDatas="getBenefitEvaluateListFun">
				<view class="discuss_model" v-if="shareList.length > 0">
					<template v-for="item in shareList" :key="item.id">


						<view class="ft-22 fw-400 c-66 text_center pd-20">订单时间{{ item.order_info?.created_at }}</view>
						<!-- 单个列 -->
						<view class="discuss_model_item bd-r40 pd-20">
							<text class="ft-22 fw-400 c-66">订单号 {{ item.order_info?.ordernum }}</text>
							<view class="discuss_model_item_content bd-r40">
								<view class="top">
									<view class="img-bor flex-center bd-r50c">

										<image class="icon bd-r50c" :src="item.cover" mode="aspectFill">
										</image>
									</view>

									<view class="userInfo">
										<text class="userName ft-32 fw-800 c-33">{{ item.name }}</text>
										<view class="flex">
											<!-- <u-rate :value="0" active-color="#333333" gutter="0" size="16"
												readonly></u-rate> -->
											<comRate ref="comRate" v-if="item.avg_star" :num="item.avg_star" disabled
												noVal>
											</comRate>
											<span class="ft-24 fw-400 c-33">{{ item.good_percent }}%</span>
											<span class="ft-22 fw-400 c-99 ml-4"> ({{ item.evaluate_num }}人评价)</span>
										</view>
										<view class="ft-24 fw-400 c-33"
											@tap="goDetail(item.product_id ? `/subpackage/immigration/immigration?id=${item.product_id}` : `/subpackage/teacher/teacherDetail?id=${item.sale_id}`)">
											查看项目
											<image @click="goBack" class="icon_samll"
												src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
										</view>


									</view>
								</view>
								<view class="botn bd-r20">
									<view class="option_model flex-bwt">
										<view class="leftM">
											<text v-if="!item.is_evaluate" class="ft-22 fw-400 c-66">参加评价可返积分奖励</text>
											<view class="flex" v-else
												@tap="goDetail('/subpackage/search/detail?id=' + item.evaluate_id)">
												<!-- <u-rate :value="item.evaluate_star" :minCount="3" active-color="#333333"
													gutter="0" @change="changeRate" size="16" readonly></u-rate> -->
												<comRate ref="comRate" v-if="item.evaluate_star"
													:num="item.evaluate_star" disabled noVal>
												</comRate>

												<view class="ft-22 fw-400 c-66 ml-4">我的评价 </view>
												<image @click="goBack" class="icon1"
													src="https://cdn.oss.bon-top.cn/static_bc/images/icon15.png">
												</image>
											</view>
											<!-- <text class="ft-22 c-66">{{ list.stage_txt }}</text> -->
											<view class="flex mt-12">
												<image class="icon"
													src="https://cdn.oss.bon-top.cn/static_bc/images/gold-icon.png">
												</image>
												<view class="leftM_child2 ft-20 fw-900 c-33">
													<span v-if="item.is_evaluate">已获</span>
													+{{ item.evaluate_integral }}
												</view>
											</view>
										</view>
										<view class="rightM c-ff bd-r20 mr-20 ft-28"
											:class="!item.is_evaluate ? 'rightM-active' : ''">
											<span v-if="item.is_evaluate">已完成</span>
											<span v-else
												@click="goDetail(`/subpackage/appraise/appraiseServer?order_id=${item.order_id}&sale_id=${item.sale_id}&additional_id=${item.additional_id}&product_id=${item.product_id}`)">待评价</span>

										</view>
									</view>
								</view>

							</view>
						</view>
					</template>
				</view>
			</comLoadMord>
			<comLoadMord v-if="activsub == 3 && Object.keys(dataList).length > 0" :dataList='dataList'
				:pageInfo='pageInfo' @getDatas="getQAListFun">
				<view class="QAList_model" v-if="shareList.length > 0">
					<template v-for="item in shareList" :key="item.id">
						<!-- 单个列 -->
						<view class="QAList_model_item bd-r40 pd-20">
							<view class="flex-bwt ft-20 fw-400 c-33 pd-lr-10">
								<view class="QAList_model_item_rd">
									<image @click="goBack" class="icon_samll"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon14.png">
									</image>
									热度{{ item.hots }}
								</view>
								<view class="ft-22 c-66 fw-400">{{ item.created_at }}</view>

							</view>
							<view class="QAList_model_item_all bd-r40">
								<view class="QAList_model_item_all_top">

									<view class="QAList_model_item_all_top_content flex-c-center">
										<view class="QAList_model_item_all_content_wtModel flex">
											<view class="wt fw-800 ft-20 c-ff bd-r50c mt-4">问</view>
											<text class="wt-content ft-28 fw-800 c-33">
												<text class="wt_my" style="color: #fda517;" v-if="item.is_my">我
													&nbsp;</text>
												{{ item.name }}</text>
										</view>
										<view class="QAList_model_item_all_content_d">
											<view class="QAList_model_item_all_content_hdModel flex">
												<view class="hd fw-800 ft-20 c-33 bd-r50c">答</view>
												<text class="hd_centent fw-400 ft-24 c-66">{{
													item?.answer_info?.content
												}}</text>

											</view>
										</view>
										<view
											class="QAList_model_item_all_top_content_userModel fw-400 ft-22 c-99 flex ml-50">
											<text class="nickName"> {{ item.answer_info?.user_info?.nickname }}
											</text>
											<text v-if="item.answer_info?.user_info?.sale_id"
												style="display: inline-block;height: 25rpx;width: 2rpx;background: #999;margin: 0 10rpx;"></text>
											<text class="texts" v-if="item.answer_info?.user_info?.sale_id">{{ '平台老师' }}
											</text>

										</view>

									</view>
									<view class="img-bor">

										<image class="icon bd-r40" :src="item.product_info.cover" mode="aspectFill">
										</image>
									</view>
								</view>
								<view class="bottom bd-r20">

									<view class="userLog flex fw-400 ft-24 c-66">
										<!-- <u-avatar-group :urls="urls" size="25" gap="0.4"
											style="margin-right: 10rpx;"></u-avatar-group> -->
										<avtorGroup v-if="item.answer_userImg_list.length > 0"
											:avatars="item.answer_userImg_list" size="48"></avtorGroup>
										<text class="ml-4">
											{{ item.answer_count }}人回答了
										</text>

									</view>
									<view class="option_model flex-bwt">
										<view class="leftM">

											<view class="flex mt-12">

												<image class="icon"
													src="https://cdn.oss.bon-top.cn/static_bc/images/gold-icon.png">
												</image>


												<view class="leftM_child2 ft-20 fw-900 c-33 flex">
													<span v-if="item.is_answer">已获</span>
													+ <span class="fw-900 ft-36 c-33 ft-num">{{ item.answer_integral
													}}</span>
													&nbsp;
													<text class="ft-22 fw-400 c-33"
														v-if="!item.answer_count">(抢第一名)</text>
												</view>
											</view>
										</view>
										<view class="rightM c-ff bd-r20 mr-20 ft-28"
											:class="!item.is_answer ? 'rightM-active' : ''">

											<span v-if="item.is_answer">已回答</span>
											<span v-else @click="goPage2({ id: item.id, showPup: true })">回答问题</span>

										</view>
									</view>
								</view>

							</view>
							<view class="detail_model flex-center">
								<view class="detail_model_btn flex ft-24"
									@click="goPage('/subpackage/message/interlocutDetail', { id: item.id, showPup: false })">
									查看详情
									<image class="icon_samll" style="margin-left: 6rpx;margin-top: 5rpx;"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
									</image>
								</view>
							</view>
						</view>
					</template>
				</view>
			</comLoadMord>

		</view>

	</view>
</template>

<script setup lang="js">
import {
	ref,
	reactive,
	onMounted,
	nextTick,

} from "vue";
import { utils } from "@/utils/utils.js";
import { api } from "@/utils/api.js";
import { onLoad, onShow, onReady, onShareAppMessage, onShareTimeline, onUnload } from "@dcloudio/uni-app";
import { DataUtils } from '@/utils/Data.js'
import comLoadMord from '@/components/comLoadMord.vue'
import comTimeOut from '@/components/comTimeOut.vue'
import avtorGroup from "@/components/avtorGroup.vue";
import comRate from '@/components/comRate.vue'

let pageInfo = reactive({
	currentPage: 1,
	pageSize: 10
})
const tabList = reactive([{
	name: '项目推荐官',
	key: 1,
	title: '推荐用户办理项目，赚取积分'
},
{
	name: '评价达人',
	key: 2,
	title: '购买过的项目写感受评价，赚取积分'
},
{
	name: '问答专家',
	key: 3,
	title: '回答Ta人的问题赚取积分，越热门分越多'
},
])
let urls = [
	'https://cdn.oss.bon-top.cn/static_bc/images/icon_hai.png',
	'https://cdn.oss.bon-top.cn/static_bc/images/avtor.jpg',
	'https://cdn.oss.bon-top.cn/static_bc/images/icon_hai.png',

]
let sortList = reactive([{
	name: '升序',
	key: 1,
	click: false,
	img: 'sort.png'
},
{
	name: '降序',
	key: 2,
	click: false,
	img: 'sort.png'

},
{
	name: '热度',
	key: 3,
	img: 'icon14.png'

},
])
let activsub = ref(1)
let times = reactive(0)
// 点击顶部的选项时触发
const changeSub = (item) => {
	if (item.key == activsub.value) return
	shareList.value = []
	dataList.value = {}
	activsub.value = item.key
	const systemInfo = uni.getSystemInfoSync()

	// 获取基于375比例后的手机比例
	const dpr = Math.max(1, systemInfo.screenWidth / 375)
	const pixelRatio = uni.getSystemInfoSync().pixelRatio

	// 推荐项目
	uni.showLoading({
		title: '加载中'
	});
	selectData.value.navBarHeight = _navBarHeight.value

	if (item.key == 1) {

		getRecommendIntegralListFun()
		// 评价达人
	} else if (item.key == 2) {

		getBenefitEvaluateListFun()
		// 问答专家
	} else {
		getQAListFun()
		let tabHe = Math.round(54 * dpr * pixelRatio) / pixelRatio
		selectData.value.navBarHeight = parseInt(_navBarHeight.value + (tabHe / 2))
	}

}
onMounted(() => { })
onShow(() => {
	// 
	if (!activsub.value) activsub.value = 1
	init()
})
onLoad((option) => {
	if (option.type) {
		activsub.value = option.type

	}
	init()
})
// 初始化方法
const init = () => {
	shareList.value = []
	if (activsub.value == 1) getRecommendIntegralListFun()
	if (activsub.value == 2) getBenefitEvaluateListFun()
	if (activsub.value == 3) getQAListFun()
}
// 升序降序点击按钮
const changeSort = (val) => {
	sortList.forEach((item) => {
		pageInfo.currentPage = 1
		if (item.key == val.key && item.key !== 3) item.click = !item.click
		// 升序时 降序关闭

		if (val.key == 1 && val.click) {
			let find = sortList.find(f => f.name == '降序')
			find.click = false
		}
		if (val.key == 2 && val.click) {
			let find = sortList.find(f => f.name == '升序')
			find.click = false
		}
	})
	uni.showLoading()
	shareList.value = []
	getQAListFun()
}


// 使用 reactive 创建响应式对象
const timeData = ref({});

// 返回键
const goBack = () => {
	uni.navigateBack(-1)
}
const goPage = (url, val = '') => {
	uni.navigateTo({ url: url + '?data=' + JSON.stringify(val) })
}
const goPage2 = (val) => {
	if (!utils.isLogin()) return utils.showLogModel()

	uni.navigateTo({ url: '/subpackage/message/interlocutDetail' + '?data=' + JSON.stringify(val) })
}
const goDetail = (url) => {
	uni.navigateTo({ url: url })
}

const shareList = ref([])



// 获取 问答专家列表
const getQAListFun = () => {
	// 处理升序降序
	let obj = {
		page: 1,
		pageSize: 10,
		app_id: utils.app_id,
		identity: utils.identity,
		// 排序字段(默认时间,hots=按热度排序)
		orderBy: '',
		// 排序方式(desc=降序,asc=升序)
		orderType: '',

	}
	sortList.forEach(item => {
		if (item.key == 1 && item.click) {
			obj.orderType = 'asc'
			obj.orderBy = 'hots'
		}
		if (item.key == 2 && item.click) {
			obj.orderBy = 'hots'
			obj.orderType = 'desc'
		}
	})
	utils
		.request(
			api.getQAList, obj,
			"get"
		)
		.then((res) => {
			dataList.value = res.data
			dataList.value.noDataType = 1
			dataList.value.listIsShow = false
			uni.hideLoading();

			shareList.value = [...shareList.value, ...res.data.items]
			shareList.value.forEach(f => {
				f.answer_userImg_list = f.answer_user_list.reduce((a, b) => {
					a.push(b.user_info.avatar)
					return a
				}, [])
			})
			dataList.value.listIsShow = shareList.value.length > 0

		})
}
// 获取 评价列表
let dataList = ref({})
const getBenefitEvaluateListFun = () => {
	utils
		.request(
			api.getBenefitEvaluateList, {
			page: 1,
			pageSize: 10,
			app_id: utils.app_id,
			identity: utils.identity
		},
			"get"
		)
		.then((res) => {

			nextTick(() => {
				dataList.value = res.data
				uni.hideLoading();

				dataList.value.noDataType = 1
				dataList.value.listIsShow = false
				shareList.value = [...shareList.value, ...res.data?.items]
				dataList.value.listIsShow = shareList.value.length > 0

			})

		})
}

const startTime = ref(0)
const secondsEnd = ref(0)
const shareConfig = ref({
	title: '',
	path: '',
	imageUrl: '',
	queryParams: {} // 当前页面参数
})
const currentPages = getCurrentPages()
const currentRoute = currentPages[currentPages.length - 1]
const _options = ref({})
// 初始化分享参数
const initShareParams = (id) => {
	// 获取当前页面参数
	const query = currentRoute.options || {}
	if (!query.share_user_id) {
		const userInfo = uni.getStorageSync("userInfo")
		// 用户id
		query.share_user_id = userInfo ? userInfo.id : ''
	}
	// 视频id
	query.id = id
	query.timestemp = parseInt((new Date().getTime()) / 1000)


	const queryString = Object.keys(query)
		.map(key => `${key}=${query[key]}`)
		.join('&')
	// subpackage/immigration/immigration?id=7&share_user_id=25&timestemp=1744789355
	// 更新分享配置
	shareConfig.value = {
		...shareConfig.value,
		path: `subpackage/immigration/immigration?${queryString}`,
		queryParams: query,

	}
}

// 自定义分享方法
const handleTouchStart = (list) => {
	shareConfig.value.title = list.name
	shareConfig.value.imageUrl = list.cover
}
const onCustomShare = (id, list) => {
	shareConfig.value.title = list.name
	shareConfig.value.imageUrl = list.cover
	initShareParams(id)
}
// 好友分享配置
onShareAppMessage(() => ({
	title: shareConfig.value.title,
	path: shareConfig.value.path,
	imageUrl: shareConfig.value.imageUrl,
	success(res) {
		uni.$emit('shareSuccess', {
			type: 'friend',
			data: shareConfig.value.queryParams
		})
	}
}))

// 朋友圈分享配置（需基础库2.11.3+）
onShareTimeline(() => ({
	title: shareConfig.value.title,
	query: shareConfig.value.path.split('?') || '',
	imageUrl: shareConfig.value.imageUrl
}))

// 获取 推荐列表 
const getRecommendIntegralListFun = () => {
	utils
		.request(
			api.getRecommendIntegralList, {
			page: 1,
			pageSize: 10,
			app_id: utils.app_id,
			identity: utils.identity
		},
			"get"
		)
		.then((res) => {
			uni.hideLoading();
			dataList.value = res.data
			dataList.value.noDataType = 0
			dataList.value.listIsShow = false

			shareList.value = [...shareList.value, ...dataList.value?.items]
			dataList.value.listIsShow = shareList.value.length > 0
			times = DataUtils.daysUntil('2025-2-21 13:20:00')

		});
};

const selectData = ref({})
const _navBarHeight = ref(0)
onReady(async () => {
	// 计算宽高比
	let aspectRatio = ((588 / 2) / 370) * 100

	const systemInfo = uni.getSystemInfoSync()
	let statusBarHeight = systemInfo.statusBarHeight
	let screenWidth = systemInfo.screenWidth

	// 获取基于375比例后的手机比例
	const dpr = Math.max(1, screenWidth / 375)
	const pixelRatio = uni.getSystemInfoSync().pixelRatio
	let menuButtonInfo = 0
	// #ifdef MP
	menuButtonInfo = wx.getMenuButtonBoundingClientRect();
	// #endif
	let navHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
	let navBarHeight = parseInt(((screenWidth * aspectRatio) / 100));//导航总高+tabber
	let tabHe = Math.round(214 * dpr * pixelRatio) / pixelRatio
	_navBarHeight.value = Math.round((navBarHeight + (tabHe / 2)) * dpr) / dpr,//导航总高
		selectData.value = {
			// headHeight: navHeight,
			screenWidth: screenWidth,
			statusBarHeight: statusBarHeight,
			navBarHeight: _navBarHeight.value,//导航总高
			bgImgHeight: navBarHeight,//背景图高度
			navBarHeightTitle: navHeight,//导航文字模块总高
			headItem: statusBarHeight + navHeight,
			menuButtonRight: (screenWidth - menuButtonInfo.right) + menuButtonInfo.width,
		}
	if (activsub.value == 3) selectData.value.navBarHeight = parseInt(_navBarHeight.value + (54 / 2))
})
</script>

<style lang="scss" scoped>
.head {
	// height: 572rpx;
	// // height: 750rpx;
	// background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/tuan_bg.png");
	// background-size: 100% 100%;
	// background-image: url('https://cdn.oss.bon-top.cn/static_bc/images/shareHead.png');
	// background-size: 100% 100%;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	// background: red;

	// z-index: 2;
	.bg_img {
		position: absolute;
		z-index: 0;
	}

	.null {
		width: 100%;
		height: 88rpx;
	}

	.back_box {
		position: relative;

		.bg {
			height: 290rpx;
			position: absolute;
			top: 0;
			left: 0;
			background: linear-gradient(180deg, #FFF3EC 0%, rgba(251, 255, 223, 0) 100%);
		}

		.back {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			overflow: hidden;

			.text {
				width: 366rpx;
				text-align: center;

			}
		}

		.icon {
			width: 28rpx;
			height: 48rpx;
			margin-left: 30rpx;
			margin-right: auto;
		}

		.headerContent {

			// background: wheat;
			.header_box_slot {
				// height: calc(396rpx + (132rpx / 2));
				height: 100%;
				// background: red;

				.tabList {
					position: absolute;
					bottom: 30rpx;

					.tab {
						width: 96rpx;
						height: 72rpx;
						background: #f8f8f8;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						color: #666666;
					}

					.active {
						color: #333333;
						background: #dbf046;
					}
				}
			}

			position: absolute;
			bottom: 0;
			left: 0;
			// height: 112rpx;

			.rule {
				margin-left: 596rpx;
				margin-top: 30rpx;
				width: 154rpx;
				height: 52rpx;
				background: #ffffff;
				border-radius: 40rpx 0rpx 0rpx 40rpx;
				opacity: 0.5;
			}

		}
	}



}

// .head {
// 	position: relative;
// 	height: 630rpx;
// 	background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/integralHead.png");
// 	background-size: 100% 100%;

// 	.null {
// 		width: 100%;
// 		height: 88rpx;
// 	}

// 	.back {
// 		height: 88rpx;
// 		width: 100%;

// 		.icon {
// 			width: 28rpx;
// 			height: 48rpx;
// 			margin-left: 30rpx;
// 			margin-right: 258rpx;
// 		}
// 	}

// }

.search-model {
	width: 100%;
	position: absolute;
	bottom: 0;

	.tab_model {
		display: flex;


		.subsection {
			background-color: #F8F8F8;
			// width: 124rpx;
			padding: 0 20rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;

		}

		.subsection_active {
			background-color: #DBF046;
			color: #333;
		}
	}

	.rule-model {
		width: 690rpx;
		height: 72rpx;
		background: linear-gradient(to bottom, #F2F2FF, #fff);
		margin: 20rpx auto;

		.button {
			width: 128rpx;
			height: 52rpx;
			line-height: 52rpx;
			color: #333;
			text-align: center;
			background: #FFFFFF;


		}
	}
}

.sort_model {
	width: 320rpx;
	height: 54rpx;

	.sortImg {
		width: 10rpx;
		height: 20rpx;
		margin-left: 5rpx;
	}

	.sortImg_deg {
		width: 10rpx;
		height: 20rpx;
		margin-left: 5rpx;
		transform: rotate(180deg);
	}

	// background: linear-gradient(to bottom ,#FBFFDF,#FFFFFF);
	&_item {
		background: linear-gradient(to bottom, #FBFFDF, #FFFFFF);
		height: 100%;
		width: calc(100% / 3);
	}

	&_active {
		background: linear-gradient(to bottom, #fae3b9, #FFFFFF);

	}
}

.time {
	@include flex;
	align-items: center;
	margin-left: 10rpx;

	&__custom {
		margin-top: 4px;
		width: 22px;
		height: 22px;
		background-color: #9c0000;
		border-radius: 4px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		padding: 0 4rpx;


		&__item {
			color: #fff;
			font-size: 12px;
			text-align: center;
		}
	}

	&__doc {
		color: #9c0000;
		padding: 0px 4px;
	}

	&__item {
		color: #606266;
		font-size: 15px;
		margin-right: 4px;
	}
}

.list_box {
	padding-bottom: 20rpx;
	overflow: hidden;

	.timeOut_box {
		height: 74rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin: 20rpx 20rpx 0;
		background: linear-gradient(180deg, #FFF3EC 0%, #FFFFFF 100%);
	}


	.list_model {
		margin: 0 30rpx;
		margin-top: 30rpx;
		border-radius: 40rpx;
		border: 2rpx solid #F1F1F1;
		background-color: #fff;

		.top {
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;

			.left {
				margin: 0 20rpx;
				flex-shrink: 0;
				height: 274rpx;


				.imgs {
					width: 222rpx;
					height: 274rpx;
					flex-shrink: 0;
				}
			}

			.right {
				flex: 1;
				height: 274rpx;

				// background-color: red;
				// width: 100rpx;
				// height: 100%;
				overflow: hidden;
				box-sizing: border-box;

				.title_model {
					display: flex;
					align-items: center;

					.label {
						border-radius: 8rpx;
						padding: 0 4rpx;
						height: 36rpx;
						display: inline-block;
						line-height: 36rpx;
						box-sizing: border-box;
						margin-right: 4rpx;
						color: #333333;
						background: linear-gradient(to right, #DBF046, #FFEE7E);


					}

					.text {
						// width: 62%;\
						flex: 1;
						/* 显示省略符号来代表被修剪的文本 */
						text-overflow: ellipsis;
						/* 防止文本换行 */
						white-space: nowrap;
						/* 隐藏溢出的内容 */
						overflow: hidden;
						margin-left: 10rpx;

					}



				}

				.money_model {
					.userNum {
						// padding-right: 10rpx;
						background: linear-gradient(95deg, #F8F8F8 0%, rgba(248, 248, 248, 0) 100%);
						border-radius: 34rpx 34rpx 34rpx 34rpx;
						padding: 10rpx 0 10rpx 10rpx;
					}
				}

				.option_model {
					width: 100%;

					.leftM {
						display: flex;
						flex-direction: column;
						background: linear-gradient(87deg, #F8F8F8 0%, rgba(248, 248, 248, 0) 100%);
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						padding: 8rpx 10rpx 10rpx 20rpx;

						.icon {
							width: 36rpx;
							height: 36rpx;
						}

						.leftM_child2 {
							// background: linear-gradient(to right, #DBF046, #FFEE7E);

						}
					}

					.rightM {
						width: 132rpx;
						height: 78rpx;
						line-height: 78rpx;
						text-align: center;
						background-color: #DBF046;
						color: #333;
						position: relative;

						.hidden-share-btn {
							opacity: 0;
							position: absolute;
							width: 132rpx;
							height: 78rpx;
							left: 0;
							top: 0;
						}


					}


				}
			}
		}

		.bot-f {
			padding: 20rpx;

			.bottom {
				background-color: #FBFFDF;
				padding: 20rpx;
				height: 78rpx;


				.bot_model {
					// height: 118rpx;
					height: 100%;
					margin-top: 26rpx;

					.imgs {
						width: 30rpx;
						height: 30rpx;
					}
				}

				.titleM {

					top: -8rpx;
				}

			}
		}

		.bot-tips {
			text-align: center;
			width: 100%;
			// height: 52rpx;
			// line-height: 52rpx;
			margin: 20rpx 0;
		}

	}

	.discuss_model {
		&_item {
			background-color: #F8F8F8;
			width: 690rpx;
			margin: 0 auto;

			&_content {
				background-color: #FFFFFF;
				height: 320rpx;
				padding: 20rpx;
				margin-top: 20rpx;

				.top {
					// background-color: #DBF046;
					height: calc(100% - 108rpx);
					display: flex;


					.img-bor {
						width: 108rpx;
						height: 108rpx;
						border: 4rpx solid #DBF046;
						margin-top: 30rpx;


						.icon {
							width: 94.5rpx;
							height: 94.5rpx;
						}
					}

					.userInfo {
						height: 100%;
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;
					}
				}

				.botn {
					height: 108rpx;
					background-color: #F8F8F8;
					padding: 0 20rpx;

					.icon1 {
						width: 24rpx;
						height: 16rpx;
						transform: rotate(-90deg);
					}

					.option_model {
						width: 100%;
						height: 100%;

						.leftM {
							display: flex;
							flex-direction: column;

							.icon {
								width: 36rpx;
								height: 36rpx;
							}

							.leftM_child2 {
								// background: linear-gradient(to right, #DBF046, #FFEE7E);
								margin-left: 10rpx;
							}
						}

						.rightM {
							width: 132rpx;
							height: 78rpx;
							line-height: 78rpx;
							text-align: center;
							background-color: #F1F1F1;
							color: #999999;


						}

						.rightM-active {
							background-color: #333333;
							color: #DBF046;
						}

					}
				}


			}
		}
	}

	.QAList_model {
		&_item {
			background-color: #F8F8F8;
			width: 690rpx;
			margin: 0 auto;
			margin-bottom: 30rpx;

			&_rd {
				padding: 10rpx;
				border-radius: 8rpx;
				background: linear-gradient(to bottom, #FFF3EC, #FFFFFF);
			}

			&_all {
				background-color: #FFFFFF;
				height: 328rpx;
				padding: 20rpx;
				margin-top: 20rpx;

				&_top {
					border-bottom: 1px solid #F1F1F1;
					height: 210rpx;
					display: flex;
					justify-content: space-between;


					// background-color: red;
					// height: calc(100% - 108rpx);
					.QAList_model_item_all_content_w {}

					&_content {
						height: 100%;
						justify-content: space-evenly;
						align-items: self-start;

						.QAList_model_item_all_content_wtModel {
							align-items: flex-start;

							.wt {
								width: 40rpx;
								height: 40rpx;

								background-color: #333;
								text-align: center;
								line-height: 40rpx;
								margin-right: 10rpx;
								flex-shrink: 0;
							}

							.wt_my {
								// color: #d8f30c;
								color: #fda517;
							}

							.hd_centent {
								display: -webkit-box;
								-webkit-line-clamp: 1;
								/* 限制显示的行数为1 */
								-webkit-box-orient: vertical;
								overflow: hidden;

							}
						}

						.QAList_model_item_all_content_hdModel {
							height: 70rpx;
							width: 424rpx;
							// background-color: red;

							.hd {
								width: 40rpx;
								height: 40rpx;
								background-color: #DBF046;
								text-align: center;
								line-height: 40rpx;
								margin-right: 10rpx;
								flex-shrink: 0;

							}

							.hd_centent {
								display: -webkit-box;
								-webkit-line-clamp: 2;
								/* 限制显示的行数为2 */
								-webkit-box-orient: vertical;
								overflow: hidden;

							}
						}


						&_userModel {
							.texts {
								// padding: 0 10rpx;
								// border-left: 1px solid #999;
								// margin-left: 10rpx;
							}

						}
					}

					.img-bor {
						width: 116rpx;
						height: 146rpx;

						.icon {
							width: 116rpx;
							height: 146rpx;
						}
					}
				}

				.bottom {
					margin-top: 10rpx;

					.option_model {
						width: 100%;
						height: 100%;

						.leftM {
							display: flex;
							flex-direction: column;

							.icon {
								width: 36rpx;
								height: 36rpx;
							}

							.leftM_child2 {
								// background: linear-gradient(to right, #DBF046, #FFEE7E);
								margin-left: 10rpx;
							}
						}

						.rightM {
							width: 136rpx;
							height: 58rpx;
							line-height: 58rpx;
							text-align: center;
							background-color: #F1F1F1;
							color: #999999;


						}

						.rightM-active {
							background-color: #333333;
							color: #fff;
						}
					}
				}
			}

			.detail_model {
				height: 74rpx;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
				border-radius: 0rpx 0rpx 40rpx 40rpx;

				&_btn {}
			}
		}
	}
}
</style>